<template>
    <div class="">
        <div style="width: auto;height: 400px" id="main"
             v-loading="true"
             element-loading-text="数据加载中...">
        </div>
        <el-table :data="tthis.tableData">
            <el-table-column type="index" width="50"/>
            <!--      <el-table-column prop="id" label="id" width="120"></el-table-column>-->
            <el-table-column prop="deviceId" label="设备id" width="120"></el-table-column>
            <el-table-column prop="nodeId" label="节点id" width="120"></el-table-column>
            <el-table-column prop="nodeDescription" label="节点描述" width="240"></el-table-column>
            <el-table-column prop="ph" label="酸碱度"></el-table-column>
            <el-table-column prop="createTime" label="时间" width="210"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import axios from 'axios'
import * as echarts from "echarts";
import {inject, onMounted, reactive} from "vue";


// 使用 inject 获取全局变量
const $host = inject('$host');
axios.defaults.baseURL = $host

const item = {
    id: "0",
    nodeId: "0",
    deviceId: "0",
    nodeDescription: "-。-",
    ph: "xxx",
    createTime: "118，231",
};
const tthis = reactive({
    tableData: Array(5).fill(item),
    carbonDioxideData: []
})

function echartsInit() {
    //柱形图
    //因为初始化echarts 的时候，需要指定的容器 id='main'
    echarts.init(document.getElementById('main')).setOption({
        xAxis: {
            type: 'category',
            data: tthis.carbonDioxideData.map(item => item[0])
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: tthis.carbonDioxideData.map(item => item[1]),
                type: 'line',
                smooth: true
            }
        ]
    })
}

onMounted(() => {
    axios({
        method: 'GET',
        url: '/node-data/list',
        params: {
            sensorEnum: 'PH'
        }
    }).then(({data}) => {
        tthis.carbonDioxideData = data.data.reverse().map(item => {
            return [item.createTime, item.ph]
        })
        // 在通过mounted调用即可
        echartsInit()

        tthis.tableData = data.data.reverse().map(item => {
            item.ph += ' '
            return item
        })
    })
})
</script>
<style scoped>
/* //@import url(); 引入公共css类 */
</style>
